<template>
  <div style="width: 100%; height: 100%">
    <div v-if="dataList.length > 4" class="arrowdiv">
      <px-button :color="`${dark ? '#fff' : ''}`" style="float: left" :icon="ArrowLeft" plain text :disabled="!canPrev" @click="handelPrev" />
      <px-button :color="`${dark ? '#fff' : ''}`" style="float: left" :icon="ArrowRight" plain text :disabled="!canNext" @click="handelNext" />
    </div>
    <px-carousel
      v-if="chartsList.length > 0"
      ref="carouselContainer"
      :loop="true"
      :autoplay="autoplay"
      arrow="never"
      style="height: 100%"
      :interval="5000"
      @change="handleCarouse"
    >
      <px-carousel-item v-for="(list, index) in chartsList" :key="index">
        <div v-for="(chartsList, index1) in list" :key="index1" class="chart-item">
          <chartsUpw
            style="width: 100%; height: 100%"
            :chartsList="chartsList"
            :xaxis="xaxis"
            :color="'#3B82F6'"
            :width="'100%'"
            :height="'100%'"
            :type="type"
          />
        </div>
        <template #arrow-left>
          <px-icon><ArrowLeft /></px-icon>
        </template>
      </px-carousel-item>
    </px-carousel>
    <div v-else>
      <px-empty :image-size="50" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { toRefs } from "vue";
import { reactive, onMounted, ref } from "vue";
import chartsUpw from "./chartsUpw.vue";
const carouselContainer = ref(Math.random().toString(36).slice(2, 10));
import { ArrowLeft, ArrowRight } from "@px-ui/icons-vue";
import { queryChartForHour } from "@/api/waterKanban";
onMounted(() => {
  byEvents();
});
const props = defineProps({
  type: {
    type: String,
    default: ""
  },
  dark: {
    type: Boolean,
    default: false
  },
  autoplay: {
    type: Boolean,
    default: false
  }
});
const state = reactive({
  dataList: [],
  chartsList: [],
  xaxis: []
});
const { dataList, chartsList, xaxis } = toRefs(state);
const handelPrev = () => {
  carouselContainer.value.prev();
};
const handelNext = () => {
  carouselContainer.value.next();
};

const random = (max, min) => {
  return Number((Math.random() * (max - min) + min).toFixed(2));
};

const canPrev = ref(false);
const canNext = ref(true);
const handleCarouse = index => {
  canPrev.value = index > 0;
  canNext.value = index < chartsList.value.length - 1;
};
const sliceArrayInGroup = arr => {
  const result = [];
  for (let i = 0; i <= arr.length - 4; i++) {
    result.push(arr.slice(i, i + 4));
  }
  return result;
};
const byEvents = () => {
  queryChartForHour({ dictTypeCode: "MCTS", dictKey: "WCSWSD" }).then((response: any) => {
    // const data = response.panelList.map(e => {
    //   e.details.forEach(i => {
    //       i.value = random(22.6, 21.4);
    //       i.xaxis = i.xaxis
    //   })
    //   e.maxValue = null;
    //   e.minValue = null;
    //   return e;
    // });
    dataList.value = response.panelList || [];
    xaxis.value = response.xaxis && response.xaxis.length ? response.xaxis.map(e => e.split(" ")[1]) : [];
    // let newDataList = [];
    // let current = 0;
    // if (dataList.value && dataList.value.length > 0) {
    //   for (let i = 0; i <= dataList.value.length - 1; i++) {
    //     if (i % 4 !== 0 || i === 0) {
    //       if (!newDataList[current]) {
    //         newDataList.push([dataList.value[i]]);
    //       } else {
    //         newDataList[current].push(dataList.value[i]);
    //       }
    //     } else {
    //       current++;
    //       newDataList.push([dataList.value[i]]);
    //     }
    //   }
    // }
    chartsList.value = [...sliceArrayInGroup(dataList.value)];
    if (chartsList.value.length > 1) {
      canNext.value = true;
    }
  });
};
</script>
<style scoped lang="scss">
.chart-item {
  float: left;
  width: 25%;
  min-width: 200px;
  height: 100%;
}

.arrowdiv {
  position: absolute;
  top: 10px;
  right: 0;
  z-index: 99999;
  width: 110px;
  height: 20px;

  i {
    cursor: pointer;
  }
}

:deep(.px-carousel__container) {
  position: relative;
  height: 100%;
}

:deep(.px-carousel__indicators--horizontal) {
  bottom: -15px;
}
</style>
